<template>
	<view class="p-4 page-bg">
		<!-- 用户信息 -->
		<view class="py-[50rpx] flex flex-col gap-2 items-center">
			<view class="w-[160rpx] h-[160rpx] rounded-full overflow-hidden">
				<image class="w-full h-full" src="../../static/logo.png" mode="aspectFill"></image>
			</view>
			<view class="text-[44rpx]">{{ userInfo.IP }}</view>
			<view class="text-gray-500">来自: {{ userInfo.address.city }} </view>
		</view>
		<!-- 操作区 -->
		<view class="control-box mb-4">
			<row-control icon="download-filled" text="我的下载" :count="1" />
			<row-control icon="star-filled" text="我的评分" :count="20" />
			<row-control icon="chatboxes-filled" text="联系客服" :bordered="false" />
		</view>
		<view class="control-box">
			<row-control icon="notification-filled" text="订阅更新" />
			<row-control icon="flag-filled" text="常见问题" :bordered="false" />
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { getUserInfo } from '@/api/home'
	const userInfo = ref({
		IP: '127.0.0.1',
		address: {
			country: '-',
			province: '湖北省',
			city: '荆州市'
		}
	})
	async function pageInit() {
		userInfo.value = (await getUserInfo()).data
	}
	pageInit()
</script>

<style scoped>
	.control-box {
		@apply border border-gray-200 border-solid rounded-lg overflow-hidden;
	}
</style>
